<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            background: 0;
        }

        body {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            font-family: "Helvetica Neue", Helvetica, sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #3d4145;
            background: #eeeeee;
            overflow: hidden;
        }

        .opc-page-group,
        .opc-page {
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #efeff4;
            overflow: hidden;
        }

        .opc-page {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: #eeeeee;
            z-index: 2000;
        }

        .opc-content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .opc-page-overlay {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0.5;
            z-index: -1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        body.with-opc-panel-left-reveal .opc-page-overlay {
            -webkit-transform: translate3d(240px, 0, 0);
            transform: translate3d(240px, 0, 0);
            -webkit-transition: 400ms;
            transition: 400ms;
            -webkit-transition-property: -webkit-transform;
            transition-property: transform;
        }

        .opc-panel {
            left: 0;
            z-index: 1000;
            display: none;
            background: #111;
            color: white;
            box-sizing: border-box;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            width: 240px;
            top: 0;
            height: 100%;
        }

        body.with-opc-panel-left-reveal .opc-page {
            -webkit-transform: translate3d(240px, 0, 0);
            transform: translate3d(240px, 0, 0);
            -webkit-transition: 400ms;
            transition: 400ms;
            -webkit-transition-property: -webkit-transform;
            transition-property: transform;
        }

        body.opc-panel-closing .opc-page {
            -webkit-transition: 400ms;
            transition: 400ms;
            -webkit-transition-property: -webkit-transform;
            transition-property: transform;
        }
    </style>
</head>

<body>
    <div class="opc-page-group">
        <div class="opc-page">
            <div class="opc-content">
                <div style="height:2000px">
                    <div style="height:500px"></div>
                    <span id="openPanel">打开</span>dfsafasdfasdfasdfasdf</div>
            </div>
        </div>
        <div class="opc-page-overlay"></div>
        <div class="opc-panel opc-panel-left">
            <div style="height:1500px">
                <span id="closePanel">关闭</span>
            </div>
        </div>
    </div>
</body>
<script src='./zepto.min.js'></script>
<script>
    $(function () {
        $.allowPanelOpen = true;
        $.openPanel = function (panel) {
            if (!$.allowPanelOpen) return false;
            panel = panel ? $(panel) : $(".panel").eq(0);
            if (panel.length === 0 || panel.hasClass('active')) return false;
            $.closePanel();
            $.allowPanelOpen = false;
            panel.css({ display: 'block' }).addClass('active');
            $('.opc-page-overlay').css({ zIndex: 5999 });
            function panelTransitionEnd() {
                $('.opc-page').transitionEnd(function (e) {
                    if (e.target === $('.opc-page')[0]) {
                        $.allowPanelOpen = true;
                    }
                    else panelTransitionEnd();
                });
            }
            panelTransitionEnd();

            $(document.body).addClass('with-opc-panel-left-reveal');
            return true;
        };
        $.closePanel = function () {
            var activePanel = $('.opc-panel.active');
            if (activePanel.length === 0) return false;
            activePanel.removeClass('active');
            $.allowPanelOpen = false;

            $('.opc-page').transitionEnd(function () {
                if (activePanel.hasClass('active')) return;
                activePanel.css({ display: '' });
                $('body').removeClass('opc-panel-closing');
                $.allowPanelOpen = true;
                $('.opc-page,.opc-page-overlay').attr('style', '');
            });

            $('body').addClass('opc-panel-closing').removeClass('with-opc-panel-left-reveal');
        };

        $(document).on("click", "#openPanel", function (e) {
            $.openPanel('.opc-panel-left');
        });
        $(document).on("click", "#closePanel, .opc-page-overlay", function (e) {
            $.closePanel();
        });
        bindEvent($(".opc-page-overlay")[0]);

        function bindEvent(el) {
            var pos = {};
            var direction = "";
            var CSS3 = function () {
                var o = {},
                    output;
                var prefix = ["-webkit-", "-moz-", "-ms-", "-o-"];
                if (typeof arguments[0] == "string") {
                    o[arguments[0]] = arguments[1]
                } else {
                    o = arguments[0]
                }
                for (var k in o) {
                    for (var i = 0, len = prefix.length; i < len; i++) {
                        o[prefix[i] + k] = o[k]
                    }
                }
                return o
            };
            var setPos = function (pos, needTransition) {
                var ani = {};
                ani.transition = needTransition ? "all 0.4s ease" : "all 0s ease";
                ani.transform = "translate3d(" + pos + ", 0, 0)";
                $(el).css(CSS3(ani));
                $(".opc-page").css(CSS3(ani));
            }
            el.addEventListener("touchstart", function (ev) {
                direction = "";
                pos.x1 = ev.touches[0].pageX;
                pos.y1 = ev.touches[0].pageY;
                pos.left = $('.opc-page-overlay').offset().left;
                return;
            })
            el.addEventListener("touchmove", function (ev) {
                pos.x2 = ev.touches[0].pageX;
                pos.y2 = ev.touches[0].pageY;
                var x = pos.x2 - pos.x1;
                var y = pos.y2 - pos.y1; !direction && (direction = Math.abs(y) > Math.abs(x) ? "vertical" : "horizontal");
                if (direction == "vertical") {
                    return
                }
                if (x === 0) {
                    setPos(0, true);
                    return;
                }
                if (pos.left + x >= 240 && x > 0) {
                    return;
                }

                if (pos.left + x <= 0 && x < 0) {
                    return;
                }
                setPos(pos.left + x + "px", false);
                ev.preventDefault();
                return false
            })
            el.addEventListener("touchend",
                function (ev) {
                    pos.x2 = ev.changedTouches[0].pageX;
                    pos.y2 = ev.changedTouches[0].pageY;
                    var x = pos.x2 - pos.x1;
                    var y = pos.y2 - pos.y1;
                    if (direction == "vertical" || x > 3 || (Math.abs(x) > 3 && Math.abs(x) < 50)) {
                        setPos("240px", true);
                        return
                    }
                    $('.opc-page,.opc-page-overlay').attr('style', '');
                    $.closePanel();
                    ev.preventDefault();
                    return false
                },
                false)
        }


    });
</script>

</html>